<template>
  <div class="home">
    <h2>首页</h2>
    <div class="banner">
      <div class="banner-header">
        <span>banner</span>
        <div class="push-banner">
          <i class="el-icon-circle-plus" @click="push_banner()"></i>
          <span>添加banner</span>
        </div>
      </div>
      <!-- 表格主体 -->
      <div class="banner-table item-table">
        <el-table :data="tableData" border>
          <el-table-column fixed prop="number" label="排序" min-width="30px" align="center"></el-table-column>
          <el-table-column label="图片" min-width="120px" align="center">
            <template slot-scope="scope">
              <form class="banner_loade" enctype="multipart/form-data">
                <el-button class="upload" size="small" type="primary ">
                  上传图片
                  <input class="file" type="file" name="file" :id="scope.$index" @change="uploadImg($event,scope.$index)" />
                </el-button>

                <div class="loade_img">
                  <img class="img_auto" :src="tableData[scope.$index].imagesrc" alt />
                </div>
              </form>
            </template>
          </el-table-column>

          <el-table-column prop="bannerId" label="点击图片跳转到案例详情" align="center">
            <template slot-scope="scope">
              <div class="modify_icon">
                <span v-if="tableData[scope.$index].changes">{{tableData[scope.$index].docid}}</span>
                <el-input v-if="!tableData[scope.$index].changes" placeholder="请填写案例ID" v-model="tableData[scope.$index].docid"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" align="center">
            <template slot-scope="scope">
              <div class="modify_icon">
                <span v-if="tableData[scope.$index].changes">{{tableData[scope.$index].title}}</span>
                <el-input v-if="!tableData[scope.$index].changes" placeholder="请填写标题" v-model="tableData[scope.$index].title"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="label" label="标签" align="center">
            <template slot-scope="scope">
              <div class="modify_icon">
                <span v-if="tableData[scope.$index].changes">{{tableData[scope.$index].tag}}</span>
                <el-input v-if="!tableData[scope.$index].changes" placeholder="标签" v-model="tableData[scope.$index].tag"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型" align="center">
            <template slot-scope="scope">
              <el-select v-model="tableData[scope.$index].type" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button @click="editor(scope.$index,2)" type="primary" size="small">编辑</el-button>
              <el-button @click="cancelRelease(scope.$index,scope.row)" type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="banner">
      <div class="banner-header">
        <span>案例</span>
        <div class="push-banner">
          <i class="el-icon-circle-plus" @click="push_case()"></i>
          <span>添加案例</span>
        </div>
      </div>
      <!-- 表格主体 -->
      <div class="banner-table item-table">
        <el-table :data="caseData" border>
          <el-table-column fixed prop="number" label="排序" min-width="40px" align="center"></el-table-column>
          <el-table-column prop="caseId" label="案例ID" align="center">
            <template slot-scope="scope">
              <div class="modify_icon">
                <span v-if="caseData[scope.$index].changes">{{caseData[scope.$index].docid}}</span>
                <el-input v-if="!caseData[scope.$index].changes" placeholder="请填写案例ID" v-model="caseData[scope.$index].docid"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="caseType" label="类型" align="center">
            <template slot-scope="scope">
              <el-select v-model="caseData[scope.$index].type">
                <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button @click="editor(scope.$index,4)" type="primary" size="small">编辑</el-button>
              <el-button @click="caseInfo(scope.$index,scope.row)" type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-form>
      <el-form-item style="text-align:center;">
        <el-button @click="cancel('ruleForm')">取消</el-button>
        <el-button type="primary"  @click="submite()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    open
  } from 'fs';
  export default {
    data() {
      return {
        options: [{
            value: "1",
            name: "酒店"
          },
          {
            value: "2",
            name: "婚庆"
          },
          {
            value: "3",
            name: "旅拍"
          },
          {
            value: "4",
            name: "儿童"
          }
        ],
        value: "",
        tableData: [],
        url: [],
        changes: [],
        index: "",
        input: "",
        caseID: "",
        caseData: [],
        btninfo: false
      };
    },
    // 初始化页面
    created: function() {
      this.api.get("/api/rota/", {}).then(res => {
        console.log(res, 'mimi')
        if (res.code == 200) {
          //banner
          this.tableData = res.data.rotas
          for (let i = 0; i < this.tableData.length; i++) {
            this.$set(this.tableData[i], "changes", true)
            this.$set(this.tableData[i], "number", i + 1)
            let type = this.tableData[i].type
            for (let j = 0; j < this.options.length; j++) {
              if (type == this.options[j].value) {
                this.$set(this.tableData[i], "type", this.options[j].name)
              }
            }
          }
          //案例
          this.caseData = res.data.hotsamples
          for (let i = 0; i < this.caseData.length; i++) {
            this.$set(this.caseData[i], "changes", true)
            this.$set(this.caseData[i], "number", i + 1)
            let type = this.caseData[i].type
            for (let j = 0; j < this.options.length; j++) {
              if (type == this.options[j].value) {
                this.$set(this.caseData[i], "type", this.options[j].name)
              }
            }
          }
          console.log(this.caseData, "恰恰")
        }
      })
    },
    methods: {
      cancel(){
        this.$router.go(-1)
      },
      //上传图片
      uploadImg(e, index) {
        console.log(e);
        console.log(index);
        let file = e.target.files[0];
        let param = new FormData();

        param.append("files", file, file.name);
        console.log(param);
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        this.api.post("/api/imgs/", param, config).then(res => {
          console.log(res);
          this.tableData[index].imagesrc = res.data[0];
        });
      },
      //添加banner
      push_banner() {
        let item = {};
        item = {
          number: this.tableData.length + 1,
          imagesrc: "",
          docid: "",
          title: "",
          type: this.tableData.type,
          tag: '',
          changes: false
        };
        this.tableData.push(item);
      },
      editor(index, num) {
        if (num == 2) {
          this.tableData[index].changes = !this.tableData[index].changes;
        } else if (num == 4) {
          this.caseData[index].changes = !this.caseData[index].changes;
        }

      },
      // 取消发布
      cancelRelease(index) {
        this.$confirm('是否确定删除当前行', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
        this.btninfo = !this.btninfo;
        this.tableData.splice(index, 1);
      },
      //添加案例
      push_case() {
        let item = {};
        item = {
          number: this.caseData.length + 1,
          caseId: "",
          caseType: this.caseType,
          changes: false
        };
        this.caseData.push(item);
      },
      caseInfo(index) {
        this.caseData.splice(index, 1)
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      },
      // 提交数据给后台
      submite() {
        // 获取给后台banner数据
        let rotas = [];
        for (let i = 0; i < this.tableData.length; i++) {
          let banner = {
            docid: null,
            type: null,
            imagesrc: null,
            title: null,
            tag: null
          }
          // 修改对象的值
          this.$set(banner, "docid", this.tableData[i].docid)
          this.$set(banner, "imagesrc", this.tableData[i].imagesrc)
          this.$set(banner, "title", this.tableData[i].title)
          this.$set(banner, "type", this.tableData[i].type)
          this.$set(banner, "tag", this.tableData[i].tag)
          let tableDataType = this.tableData[i].type
          for (let j = 0; j < this.options.length; j++) {
            if (this.tableData[i].type == this.options[j].name) {
              this.$set(banner, "type", this.options[j].value)
            }
          }
          if (JSON.stringify(banner) != "{}") {
            rotas.push(banner)
          }
        }
        //获取案例数据给后台端
        let hotsamples = [];
        console.log(this.caseData, 'mabab')
        for (let i = 0; i < this.caseData.length; i++) {
          let cases = {
            docid: null,
            type: null,
          }
          this.$set(cases, "docid", this.caseData[i].docid)
          this.$set(cases, "type", this.caseData[i].type)
          let caseDataType = this.caseData[i].type
          for (let j = 0; j < this.options.length; j++) {
            if (this.caseData[i].type == this.options[j].name) {
              this.$set(cases, "type", this.options[j].value)
            }
          }
          if (JSON.stringify(cases) != "{}") {
            hotsamples.push(cases)
          }
        }
        // 数据发送(数据成功返回)
        this.api.post('/api/home', {
          hotsamples,
          rotas
        }).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .banner {
    font-size: 20px;
  }

  .push-banner {
    display: inline-block;
    margin-left: 43px;
  }

  .push-banner>i {
    font-size: 30px;
    vertical-align: middle;
    cursor: pointer;
  }

  .push-banner>span {
    color: #999;
    margin-left: 37px;
  }

  .item-table {
    width: 100%;
    margin: 4% 0;
  }

  .banner_loade {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .upload {
    position: relative;
    width: 80px;
    height: 32px;
  }

  .file {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 32px;
    line-height: 20px;
    text-align: center;
    opacity: 0;
  }

  .loade_img {
    background: url("./../../../static/img/push.jpg") no-repeat;
    background-size: 80px 80px;
    width: 80px;
    height: 80px;
  }

  .img_auto {
   max-width: 100%;
   width: 100%;
   max-height: 100%;
   height: 100%;
   object-fit: cover;
  }

  .modify_icon {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .modify_icon>i {
    font-size: 25px;
    padding: 5px;
    cursor: pointer;
  }

  .modify_icon>i:hover {
    background-color: #fff;
  }

  .cell {
    text-align: center;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
